<template>
  <div class="margin-top">
    <div class="panel-container">
      <div class="panel-content content-1 content-view">
        <div class="panel-title">数据概况</div>
        <div class="panel-line">
          <div class="panel-item" @click="handleViewClick(1, 1)">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">人工发布</div>
                <div class="text-num">{{ viewData[1] || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-s-order"></i>
              </div>
            </div>
          </div>
          <div class="panel-item logo-orange" @click="handleViewClick(2)">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">自动发布</div>
                <div class="text-num">{{ viewData[2] || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-chat-square"></i>
              </div>
            </div>
          </div>
          <div class="panel-item logo-blue">
            <div class="item-content" @click="handleViewClick(3)">
              <div class="text-box">
                <div class="text-name">先发后审</div>
                <div class="text-num">{{ viewData[3] || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-guide"></i>
              </div>
            </div>
          </div>
          <div class="panel-item warning" @click="handleViewClick(4)">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">采集待处理</div>
                <div class="text-num">{{ viewData[4] || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-s-goods"></i>
              </div>
            </div>
          </div>
          <div class="panel-item danger" @click="handleViewClick(5)">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">已失效</div>
                <div class="text-num">{{ viewData[5] || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-delete"></i>
              </div>
            </div>
          </div>
          <div class="panel-item danger" @click="handleViewClick(1, 2)">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">手动添加</div>
                <div class="text-num">{{ viewData.hand_add || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-thumb"></i>
              </div>
            </div>
          </div>
          <div class="panel-item logo-blue" @click="$emit('showDialog', 'userPub')">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">用户发布</div>
                <div class="text-num">{{ viewData.user_pub || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-user"></i>
              </div>
            </div>
          </div>
          <div class="panel-item logo-orange" @click="$emit('showDialog', 'signUp')">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">公告报名</div>
                <div class="text-num">{{ viewData.notice_apply || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-s-check"></i>
              </div>
            </div>
          </div>
          <div class="panel-item" @click="handleViewClick('inner')">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">内部公告</div>
                <div class="text-num">{{ viewData.inner_notice || 0 }}</div>
              </div>
              <div class="icon-box">
                <i class="icon el-icon-notebook-2"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-container new-count">
      <div class="panel-content content-1 content-view">
        <div class="panel-title">发布概况</div>
        <div class="panel-line">
          <div class="panel-item">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">有效信息总量</div>
                <div class="text-num">{{ newCount.all_count || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item logo-orange">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">人工发布</div>
                <div class="text-num">{{ newCount.new_man_add || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item logo-blue">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">手动添加</div>
                <div class="text-num">{{ newCount.new_hand_add || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item warning">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">内部公告</div>
                <div class="text-num">{{ newCount.new_inner || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item danger">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">人工修改<br />(先发后审+自动发)</div>
                <div class="text-num">{{ newCount.new_man_edit || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item danger">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">人工发布占比</div>
                <div class="text-num">{{ newCount.new_man_percent || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="panel-item logo-blue">
            <div class="item-content">
              <div class="text-box">
                <div class="text-name">自动发布占比</div>
                <div class="text-num">{{ newCount.new_auto_percent || 0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-container">
      <div class="panel-content content-2">
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="panel-title">信息查看量统计Top10</div>
            <el-table stripe :data="tableData1" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table1" style="width: 100%">
              <af-table-column align="center" header-align="center" show-overflow-tooltip prop="title" label="页面标题" width="400"> </af-table-column>
              <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num" label="查看次数"> </af-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <div class="panel-title">搜索词统计Top10</div>
            <el-table stripe :data="tableData2" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table2" style="width: 100%">
              <af-table-column align="center" header-align="center" show-overflow-tooltip prop="title" label="搜索词"> </af-table-column>
              <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num" label="搜索次数"> </af-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { apiNoticeCountInfo, apiNoticeCountTop10 } from '@/api/biddingNotice'

export default {
  name: 'Panel1',
  props: {
    time: Object,
  },
  data() {
    return {
      viewData: {},
      newCount: {},
      tableData1: [],
      tableData2: [],
    }
  },
  watch: {
    time: function () {
      this.getData()
    },
  },
  activated() {
    this.$refs.table1.doLayout()
    this.$refs.table2.doLayout()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiNoticeCountInfo(this.time).then((res) => {
        const { info, new_count } = res
        this.viewData = info
        this.newCount = new_count
      })

      apiNoticeCountTop10(this.time).then((res) => {
        const { look, words } = res
        this.tableData1 = look.map((item) => {
          return {
            title: item[0],
            num: item[1],
          }
        })
        this.tableData2 = words.map((item) => {
          return {
            title: item[0],
            num: item[1],
          }
        })
        this.$refs.table1.doLayout()
        this.$refs.table2.doLayout()
      })
    },
    handleViewClick(param, is_ai) {
      const { start_time, end_time } = this.time
      if (param === 'inner') {
        this.$store.dispatch('permission/routeAuthorization', 'InnerNoticeManagement').then((res) => {
          this.$bus.$emit('forceUpdate', 'InnerNoticeManagement')
          this.$router.push({
            path: '/biddingNotice/innerNoticeManagement',
            query: { start_time, end_time },
          })
        })
      } else {
        this.$store.dispatch('permission/routeAuthorization', 'NoticeManagement').then((res) => {
          this.$bus.$emit('forceUpdate', 'NoticeManagement')
          let query = { tab: param, start_time, end_time }
          if (is_ai) {
            query.is_ai = is_ai
          }
          this.$router.push({
            path: '/biddingNotice/noticeManagement',
            query,
          })
        })
      }
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
  flex-wrap: wrap;
}
.content-1 {
  .panel-item {
    width: 20%;
    padding: 0 5px !important;
    margin-bottom: 10px;
    margin-right: 0 !important;
    background: none !important;
    .item-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      background: #f6f6f6;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.new-count {
  .panel-line {
    flex-wrap: nowrap;
  }
  .panel-item {
    .text-name {
      height: 28px;
    }
    .item-content {
      cursor: default !important;
    }
  }
}
.margin-top {
  margin-top: 62px;
}
</style>
